<template>
  <div>
    <el-table size='mini' :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('对象名称')" min-width="100">
        <template slot-scope="scope">
          <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="cmd_type" :label="$t('协议类型')" min-width="100">
        <template slot-scope="scope">
          <tooltip :html="cmdObj[scope.row.cmd_type] || $t('其他')" :content="cmdObj[scope.row.cmd_type] || $t('其他')" class="wid190" :refName="cmdObj[scope.row.cmd_type] || $t('其他')">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="prot" :label="$t('协议号')" width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.prot" :content="scope.row.prot" class="wid190" :refName="scope.row.prot">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ports" :label="$t('端口号')" width="100">
        <template slot-scope="scope">
          <tooltip :html="scope.row.ports" :content="scope.row.ports" class="wid190" :refName="scope.row.ports">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('ICMP的类型')" min-width="80">
        <template slot-scope="scope">
          <tooltip :html="ICMPTooltipValue(scope.row.name,scope.row.type)" :content="ICMPTooltipValue(scope.row.name,scope.row.type)" class="wid190" :refName="ICMPTooltipValue(scope.row.name,scope.row.type)">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="code" :label="$t('ICMP的编码')" min-width="80">
        <template slot-scope="scope">
          <tooltip :html="ICMPTooltipValue(scope.row.name,scope.row.code)" :content="ICMPTooltipValue(scope.row.name,scope.row.code)" class="wid190" :refName="ICMPTooltipValue(scope.row.name,scope.row.code)">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ref" :label="$t('引用计数')" width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.ref" :content="scope.row.ref" class="wid190" :refName="scope.row.ref">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" :label="$t('描述')">
        <template slot-scope="scope">
          <tooltip :html="scope.row.desc" :content="scope.row.desc" class="wid190" :refName="scope.row.desc">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getServiceReArray } from '@/api/list/server'
export default {
  name: 'ServerRe',
  data () {
    return {
      tableData: [],
      cmdObj: {
        1: 'ICMP_CMD',
        2: 'TCP_CMD',
        3: 'UDP_CMD',
        4: 'DCCP_CMD',
        5: 'SCTP_CMD',
        6: 'IP_CMD',
        7: 'ICMPV6_CMD'
      }
    }
  },
  mounted () {
    getServiceReArray().then(response => {
      this.tableData = response.info
    })
  },
  methods: {
    cmd_type (row) {
      switch (row.cmd_type) {
        case 1:
          return 'ICMP_CMD'
        case 2:
          return 'TCP_CMD'
        case 3:
          return 'UDP_CMD'
        case 4:
          return 'IP_CMD'
        default:
          return this.$t('其他')
      }
    },
    ICMPTooltipValue (name,value) {
      if(name === 'ICMPV6' && value == 0) {
        return '-'
      }
      if (value === '255' || value === 255) {
        return '-'
      }
      return value
    }
  }
}
</script>

<style scoped>
</style>